<template>
    <div id="diary">
        <div class="diary-main">
            <ul class="d-m-ul">
                <li v-for="(item, index) in dataList" :key="index">
                    <el-card class="d-m-ul-box-card" :body-style="{ padding: '0px' }">
                        <div slot="header" class="d-m-ul-box-card-header">
                            <el-popover width="150" trigger="click" v-if="onlyuser">
                                <el-button type="primary" size="mini" @click="DeleteDiary(item)">删除伴宠日记</el-button>
                                <div class="d-m-ul-box-card-header-img" slot="reference">
                                    <img :src="item.portraitSrc">
                                </div>
                            </el-popover>
                            <el-popover width="150" trigger="click" v-if="!onlyuser">
                                <el-button type="primary" size="mini" @click="star(item)">关注该博主</el-button>
                                <div class="d-m-ul-box-card-header-img" slot="reference">
                                    <img :src="item.portraitSrc">
                                </div>
                            </el-popover>
                            <span class="d-m-ul-box-card-header-name">{{ item.userName }}</span>
                            <div class="d-m-ul-box-card-header-address">
                                <div>地址：{{ item.address }}</div>
                                <div>发布时间：{{ item.issueTime | dateFormat('yy-mm-dd hh24:mi:ss') }}</div>
                            </div>
                        </div>
                        <div class="d-m-ul-box-card-body">
                            <div class="d-m-ul-box-card-body-introduce">{{ item.introduction }}</div>
                            <div class="d-m-ul-box-card-body-img">
                                <img :src="item.introductionSrc">
                            </div>
                        </div>
                    </el-card>
                </li>
            </ul>
        </div>
        <el-tooltip effect="light" content="发布我的伴宠日记" placement="top">
            <i class="el-icon-plus diary-add" @click="drawerShowed = true"></i>
        </el-tooltip>
        <el-tooltip effect="light" content="刷新数据" placement="top">
            <i class="el-icon-refresh diary-refresh" @click="refresh"></i>
        </el-tooltip>
        <el-tooltip effect="light" :content="onlyuser ? '只显示自己的伴宠日记' : '显示全部伴宠日记'" placement="top">
            <i class="el-icon-view diary-onlyuser" @click="onlyuser = !onlyuser" :class="onlyuser ? 'onlyuser' : null"></i>
        </el-tooltip>
        <!-- 抽屉添加伴宠日记 -->
        <el-drawer ref="drawer" :visible.sync="drawerShowed" :with-header="false" direction="ltr" v-if="drawerShowed"
            :size="600" :before-close="handleClose" class="drawer" destroy-on-close>
            <el-form ref="form" label-position="right" label-width="80px" :model="formData"
                class="huily-flex-container-column drawer-form">
                <el-form-item class="el-form-item-img">
                    <el-upload ref="upload" :action="action" accept="image/*" :on-preview="handlePreview"
                        :on-remove="handleRemove" :on-success="handleSuccess" :show-file-list="false">
                        <div class="box-img">
                            <img :src="formData.introductionSrc" alt="请选择相处照片">
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="宠物" prop="petID">
                    <el-select v-model="formData.petID">
                        <el-option v-for="item in petList" :key="item.id" :label="item.petName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item label="时间" prop="issueTime">
                    <el-date-picker v-model="formData.issueTime" type="datetime"></el-date-picker>
                </el-form-item>
                <el-form-item label="介绍" prop="introduction">
                    <el-input v-model="formData.introduction" type="textarea" maxlength="500" show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
    import { baseURL } from '@/config/data.config.js'
    export default {
        name: 'diary',
        data() {
            return {
                drawerShowed: false,
                formData: {
                    introductionSrc: '',
                    issueTime: new Date()
                },
                action: baseURL + '/upload',
                dataList: [],
                petList: [],
                userinfo: JSON.parse(window.localStorage.getItem('HuiLY')).userinfo,
                onlyuser: false
            }
        },
        computed: {
        },
        watch: {
            drawerShowed: {
                handler(newVal) {
                    if (!newVal) {
                        this.$refs.drawer.$destroy()
                    }
                }
            },
            onlyuser: {
                handler(newVal) {
                    this.GetDataList()
                }
            }
        },
        methods: {
            refresh() {
                this.GetDataList()
                this.GetPetDataList()
            },
            star({ userID: beStarred }) {
                if (beStarred == this.userinfo.id) {
                    this.$message({
                        duration: 1000,
                        message: '不可以关注自己',
                        type: 'error'
                    })
                    return
                }
                let loading = this.$loading({
                    target: '#diary'
                })
                this.$POST('/star/insertStar', { starring: this.userinfo.id, beStarred })
                    .then((response) => {
                        this.$message({
                            message: response.data.msg,
                            type: 'success',
                            duration: 800
                        })
                        setTimeout(() => { loading.close() }, 500)
                    }).catch((response) => {
                        this.$message({
                            message: response.data.msg,
                            type: 'error',
                            duration: 800
                        })
                        loading.close()
                    })
            },
            // 获取数据 普通获取
            GetDataList() {
                let loading = this.$loading({
                    text: '获取数据中',
                    target: '#diary'
                })
                this.$GET('/diary/getDiaryList', { userID: this.userinfo.id, onlyuser: this.onlyuser })
                    .then((response) => {
                        this.dataList = response.data.data
                        setTimeout(() => {
                            loading.close()
                        }, 500);
                    }).catch(() => {
                        loading.close()
                    })
            },
            GetPetDataList() {
                this.$GET('/pet/getOnlyOwner', { ownerID: this.userinfo.id })
                    .then((response) => {
                        let data = response.data.data
                        this.petList = data
                    }).catch((response) => {
                        console.error(response);
                    })
            },
            submitForm() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let loading = this.$loading({
                            text: '提交中',
                        })
                        this.formData.userID = this.userinfo.id
                        this.$POST('/diary/insertDiary', this.formData)
                            .then((response) => {
                                this.$message({
                                    message: '发布成功',
                                    type: 'success',
                                    center: true,
                                    duration: 800,
                                })
                                this.drawerShowed = false
                                this.GetDataList()
                            }).catch((response) => {
                                this.$message({
                                    message: response.data.msg + response.data.error,
                                    type: 'error',
                                    center: true,
                                    duration: 1000,
                                })
                                console.error(response);
                            }).finally(_ => {
                                loading.close()
                            })
                    } else {
                        this.$message({
                            message: '表单验证失败！',
                            type: 'error',
                            center: true,
                            duration: 1000,
                        })
                        return false;
                    }
                });
            },
            /**
             * @param {Function} done 用户关闭抽屉函数
             */
            handleClose(done) {
                this.formData = {
                    introductionSrc: baseURL + '/static/img/baseImg.png',
                    issueTime: new Date()
                }
                done()
            },
            handlePreview() {

            },
            handleRemove() {

            },
            handleSuccess(response, file, fileList) {
                this.$refs.upload.clearFiles()
                this.formData.introductionSrc = response.imgURL
            },
            // 删除伴宠日记
            DeleteDiary(item) {
                this.$confirm('删除伴宠日记', {
                    type: 'warning'
                }).then(() => {
                    // 发起请求
                }).catch(() => { })
            }
        },
        activated() {
            this.GetPetDataList()
            this.GetDataList()
        },
        mounted() {
            this.GetPetDataList()
            this.GetDataList()
        }
    }
</script>

<style scoped lang="less">
    #diary {
        width: 100%;
        position: relative;
        display: flex;

        // flex-direction: column;
        // justify-content: center;
        // align-items: self-start;
        .diary-main {
            .d-m-ul {
                display: flex;
                flex-direction: row;
                justify-content: center;
                flex-wrap: wrap;

                &-box-card {
                    width: 600px;
                    height: 750px;
                    padding: 10px;
                    margin: 10px 50px;
                    box-shadow: 10px 10px 5px var(--main-box-shadow-color);

                    &:hover {
                        border: 1px solid rgb(250, 220, 100);
                        box-shadow: 5px 5px 5px rgb(250, 220, 100);
                    }

                    .d-m-ul-box-card-header {
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        &-img {
                            display: flex;
                            width: 65px;
                            height: 65px;
                            border-radius: 50%;
                            border: 1px solid var(--main-bg-color);
                            overflow: hidden;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }

                        .d-m-ul-box-card-header-name {
                            display: inline-block;
                            vertical-align: middle; // 对齐方式
                            text-align: center;
                            flex: 1;
                        }

                        .d-m-ul-box-card-header-address {
                            display: inline;
                            vertical-align: middle; // 对齐方式
                            margin-left: 30px;
                            align-items: flex-end;
                        }
                    }

                    &-body {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        flex: 1;
                        align-items: center;

                        .d-m-ul-box-card-body-introduce {
                            display: block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 350px;
                            height: 100px;
                            line-height: 100px;
                        }

                        &-img {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            width: 350px;
                            max-height: 100%;
                            flex: 1;
                            border-radius: 15px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                        }
                    }
                }
            }

        }

        .diary-add {
            position: fixed;
            bottom: 10%;
            right: 5%;
            font-size: 50px;
            // color: rgb(20, 40, 150);
            color: var(--mian-font-color);
            background-color: rgb(250, 220, 100);
            border-radius: 50%;
            display: inline-block;

            &:hover {
                transform: rotate(0.5turn) scale(1.1);
                transition: all .5s;
            }
        }

        .diary-refresh {
            position: fixed;
            top: 15%;
            right: 5%;
            font-size: 50px;
            // color: rgb(20, 40, 150);
            color: var(--mian-font-color);
            background-color: rgb(250, 220, 100);
            border-radius: 50%;
            display: inline-block;

            &:hover {
                transform: scale(1.1);
                transition: all .5s;
            }
        }

        .diary-onlyuser {
            position: fixed;
            top: 40%;
            right: 5%;
            font-size: 50px;
            // color: rgb(20, 40, 150);
            color: var(--mian-font-color);
            background-color: rgb(250, 220, 100);
            border-radius: 50%;
            display: inline-block;

            &:hover {
                transform: scale(1.1);
                transition: all .5s;
            }
        }

        .drawer {
            .drawer-form {
                align-items: start;
                justify-content: flex-start;

                .el-form-item-img {
                    // align-self: center;
                    margin-top: 20px;

                    .box-img {
                        display: flex;
                        width: 65px;
                        height: 65px;
                        border: 1px solid var(--main-bg-color);
                        overflow: hidden;
                        justify-content: center;
                        align-items: center;
                        float: left;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                }
            }
        }
    }
</style>

<style scoped>
    .onlyuser {
        background-color: rgb(20, 60, 180) !important;
    }
</style>